<script setup lang="ts">
definePageMeta({
  layout: 'default-yellow',
  title: '提现',
  i18n: 'menu.withDraw',
})
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
const active = ref(0);
const activeMoney = ref<number | null>(null);
const payArr = ref([
  { id: 0, name: "支付方式1", url: '/img/pay1.png' },
  { id: 1, name: "支付方式2", url: '/img/pay1.png' },
  { id: 2, name: "USTD充值", url: '/img/pay2.png' },
  { id: 3, name: "USTD充值", url: '/img/pay2.png' },
])
const moneyArr = ref([
  { id: 0, name: "100" },
  { id: 1, name: "200" },
  { id: 2, name: "300" },
  { id: 3, name: "400" },
  { id: 4, name: "500" },
  { id: 5, name: "600" },
]);
const gold = ref('');
const form = ref({});
// 充值
const goWithDraw = (values: any) => {
  if (activeMoney.value === null && gold.value == '') return showFailToast('请选择或输入提现金额');
  let payMethodName = payArr.value.find(v => v.id == active.value)?.name
  let moneyName = moneyArr.value.find(v => v.id == activeMoney.value)?.name
  form.value = { ...values, payMethod: active.value, payMethodName, payMoney: activeMoney.value, moneyName,gold:  gold.value }
  router.push({
    path: "/recharge/nowWithDraw",
    query: form.value
  });
  // console.log('submit', form.value);
};
const toggleActiveMoney = (id: number) => {
  activeMoney.value = activeMoney.value === id ? null : id;
  gold.value = ''
};
const resetActiveMoney = () => {
  activeMoney.value = null;
};
const goPush = (url: string) => {
  router.push(url)
};
</script>

<template>
  <div class="withDraw" mx-auto text-center text-16 text-dark dark:text-white>
    <div class="balance" p-15 rounded-8 mb-20 text-white>
      <div text-40 mt-13>$9999999.00</div>
      <div class="color-#8dd9fe text-12 mt--5">{{ t("recharge_page.withDrawList.walletBalance") }}</div>
    </div>
    <div class="font-bold mb-10 text-left">{{t("recharge_page.recharge.payType")}}</div>
    <div class="grid grid-cols-4 gap-3">
      <div v-for="method in payArr" :key="method.id"
        class="border-1 p-10 border-#e9e9eb rounded-10 text-14 cursor-pointer text-center mx-auto color-#838697 bg-#ffffff"
        :class="{ 'active-menu-item': active === method.id }" @click="active = method.id">
        <img :src="method.url" alt="" class=" mx-auto " :class="method.id == 2 ? 'h-24 w-24' : 'w-18 h-24'">
        <span class="text-12"> {{ method.name }}</span>
        <div v-if="active === method.id" class="triangle"></div>
        <van-icon v-if="active === method.id" name="success" class="success-icon" />
      </div>
    </div>
    <div class="font-bold my-10 text-left">{{t("recharge_page.recharge.payGold")}}</div>
    <div class="grid grid-cols-3 gap-x-40 gap-y-10  px-15">
      <div v-for="method in moneyArr" :key="method.id"
        class="border-1 p-10 border-#e9e9eb rounded-5 text-14 cursor-pointer font-bold bg-#ffffff"
        :class="{ 'active-money-item': activeMoney === method.id }" @click="toggleActiveMoney(method.id)">
        {{ method.name }}
        <div v-if="activeMoney === method.id" class="triangle"></div>
        <van-icon v-if="activeMoney === method.id" name="success" class="success-icon" />
      </div>
    </div>
    <!-- 输入金额 -->
    <div class="text-left mt-15 px-10 color-#7d8288 text-14">{{ t("recharge_page.withDrawList.custom") }}</div>
    <van-form @submit="goWithDraw">
      <van-cell-group inset>
        <van-field v-model="gold" name="gold" type="number" :min="200" :max="500000" :placeholder="t('recharge_page.withDrawList.placeNum')" clearable
          @focus="resetActiveMoney" />
      </van-cell-group>
      <div class="text-center text-12 text-gray-400">1USTD=xxxxx KS</div>
    </van-form>

    <div>
      <div
        class="w-full  text-center py-10  text-14 border-1 mt-10 border-#e2ecf4 rounded-5"
        @click="goWithDraw"   :class="[(activeMoney !== null || gold !== '') ? 'bg-[#3a94ff] text-white' : 'bg-[#dfe3f3] text-#a4a7b5']"> {{
          t("recharge_page.withDrawList.nowWithDraw") }}</div>
    </div>
    <div class="flex justify-between  mt-20">
      <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
        @click="goPush('/custoService')"> {{ t("recharge_page.withDrawList.contract") }}</div>
      <div class="w-165 bg-#f6f7ff text-center py-10 color-#6d788e text-14 border-1 border-#e2ecf4 rounded-5"
        @click="goPush('/recharge/withDrawList')"> {{ t("recharge_page.withDrawList.withDrawList") }}</div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.withDraw {
  height: calc(100vh - 71px);
  overflow: auto;
  overflow-y: scroll;
}

.active-menu-item {
  border-color: var(--c-primary);
  font-weight: bold;
  color: var(--c-primary);
  position: relative;
}

.active-money-item {
  border-color: var(--c-primary);
  font-weight: bold;
  color: var(--c-primary);
  position: relative;
}

.triangle {
  position: absolute;
  bottom: -2px;
  right: -1px;
  width: 20px;
  height: 20px;
  background-color: var(--c-primary);
  clip-path: polygon(100% 0, 0 93%, 108% 93%);
  border-bottom-right-radius: 8px;
  /* 添加右下角圆角 */
}


.success-icon {
  position: absolute;
  bottom: -2px;
  right: -1px;
  color: white;
}

::v-deep .van-cell .van-field {
  border: 1px solid #858484 !important;
}

::v-deep .van-cell-group--inset {
  background: transparent;
}

::v-deep .van-cell {
  background: #dee9ef;
  color: #aab2bb;
  margin: 10px 0;
  padding: 5px 16px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.balance {
  background: linear-gradient(to right, #26a9f5, #2173fd);
}
</style>
